<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: black;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0.5;
            z-index: 9;
        }
        .c2{
            width: 500px;
            height: 400px;
            background-color: white;
            top: 50%;
            left: 50%;
            position: fixed;
            margin-top: -250px;
            margin-left: -200px;
            z-index: 10;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body style="margin: 0 auto">
    <div>
        <input type="button" value="添加" onclick="func_on()">
        <input type="button" value="全选" onclick="choise_all()">
        <input type="button" value="取消" onclick="choise_none()">
        <input type="button" value="反选" onclick="choise_re()">
        <table>
            <thead>
                <tr>
                    <!--<td><input type="checkbox" onclick="choise()"></td>-->
                    <td>选择</td>
                    <td>主机名</td>
                    <td>端口</td>
                </tr>
            </thead>
            <tbody id="tb1">
                <tr>
                    <td><input type="checkbox"/></td>
                    <td>1.1.1.1</td>
                    <td>80</td>
                </tr>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>1.1.1.2</td>
                    <td>90</td>
                </tr>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>1.1.1.3</td>
                    <td>100</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div id ='i1' class="c1 hide"></div>
    <div id = 'i2' class="c2 hide">
        <input type="button" value="取消" onclick="func_off()">
    </div>
    <script>
        function func_on() {
            document.getElementById('i1').classList.remove('hide')
            document.getElementById('i2').classList.remove('hide')
        }
        function func_off() {
            document.getElementById('i1').classList.add('hide')
            document.getElementById('i2').classList.add('hide')
        }
        function choise_all() {
            var tbody = document.getElementById('tb1')
            var tr_list = tbody.children
            for(var i in tr_list){
                var tr = tr_list[i]
                var t_box =tr.children[0].children[0]
                t_box.checked = true
            }
        }
        function choise_none() {
            var tbody = document.getElementById('tb1')
            var tr_list = tbody.children
            for(var i in tr_list){
                var tr = tr_list[i]
                var t_box =tr.children[0].children[0]
                t_box.checked = false
            }
        }
        function choise_re() {
            var tbody = document.getElementById('tb1')
            var tr_list = tbody.children
            for(var i in tr_list){
                var tr = tr_list[i]
                var t_box =tr.children[0].children[0]
                if(t_box.checked){
                    t_box.checked = false
                }else {
                    t_box.checked = true
                }
            }
        }
//        function choise() {
//            var tbody = document.getElementById('tb1')
//            var tr_list = tbody.children
//            for(var i in tr_list){
//                var tr = tr_list[i]
//                var t_box =tr.children[0].children[0]
//                if(t_box.checked){
//                    t_box.checked = false
//                    t_box.checked = true
//                }
//
//            }
//        }

    </script>
</body>
</html>